document.addEventListener('DOMContentLoaded', function () {
    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');
    const completedCount = document.getElementById('completedCount');
    const clearCompleted = document.getElementById('clearCompleted');
    const toggleCompleted = document.getElementById('toggleCompleted');

    let showCompleted = true; // 控制是否显示已完成任务

    // 从localStorage加载任务
    loadTasks();

    addTaskBtn.addEventListener('click', function () {
        const taskText = taskInput.value.trim();
        if (taskText !== '') {
            addTask(taskText);
            taskInput.value = '';
            saveTasks();
            updateCompletedCount();
        }
    });

    taskInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            const taskText = taskInput.value.trim();
            if (taskText !== '') {
                addTask(taskText);
                taskInput.value = '';
                saveTasks();
                updateCompletedCount();
            }
        }
    });

    clearCompleted.addEventListener('click', function () {
        const completedTasks = taskList.querySelectorAll('li.completed');
        completedTasks.forEach(task => task.remove());
        saveTasks();
        updateCompletedCount();
    });

    toggleCompleted.addEventListener('click', function () {
        showCompleted = !showCompleted;
        toggleCompleted.textContent = showCompleted ? '隐藏已完成' : '显示已完成';
        updateTaskVisibility();
    });

    function addTask(taskText, isCompleted = false) {
        const li = document.createElement('li');
        li.innerHTML = `
            <input type="checkbox" ${isCompleted ? 'checked' : ''}>
            <span>${taskText}</span>
            <button class="edit-btn">编辑</button>
            <button>删除</button>
        `;
        taskList.appendChild(li);

        const checkbox = li.querySelector('input[type="checkbox"]');
        const editBtn = li.querySelector('.edit-btn');
        const deleteBtn = li.querySelector('button:not(.edit-btn)');

        checkbox.addEventListener('change', function () {
            li.classList.toggle('completed', checkbox.checked);
            saveTasks();
            updateCompletedCount();
        });

        editBtn.addEventListener('click', function () {
            const span = li.querySelector('span');
            const newText = prompt('编辑任务', span.textContent);
            if (newText !== null && newText.trim() !== '') {
                span.textContent = newText.trim();
                saveTasks();
            }
        });

        deleteBtn.addEventListener('click', function () {
            li.remove();
            saveTasks();
            updateCompletedCount();
        });

        // 初始化任务状态
        li.classList.toggle('completed', isCompleted);
        updateTaskVisibility();
    }

    // 更新已完成任务数量
    function updateCompletedCount() {
        const totalTasks = taskList.querySelectorAll('li').length;
        const completedTasks = taskList.querySelectorAll('li.completed').length;
        completedCount.textContent = `已完成 ${completedTasks}/全部 ${totalTasks}`;
    }

    // 更新任务可见性
    function updateTaskVisibility() {
        taskList.querySelectorAll('li').forEach(li => {
            if (li.classList.contains('completed')) {
                li.style.display = showCompleted ? 'flex' : 'none';
            }
        });
    }

    // 保存任务到localStorage
    function saveTasks() {
        const tasks = [];
        taskList.querySelectorAll('li').forEach(li => {
            tasks.push({
                text: li.querySelector('span').textContent,
                completed: li.querySelector('input[type="checkbox"]').checked
            });
        });
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    // 从localStorage加载任务
    function loadTasks() {
        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        tasks.forEach(task => {
            addTask(task.text, task.completed);
        });
        updateCompletedCount();
    }
});